<template>
    <div class="main-tabbar">
        <TabBar>
        <TabBarItem path="/home">
        <img slot="item-icon"  src="@/assets/images/base-images/首页.png" alt="">
        <img slot="item-icon-active" src="@/assets/images/base-images/首页-选中.png" alt="">
        <div slot="item-text">首页</div>
        </TabBarItem>
        <TabBarItem path="/problems">
        <img slot="item-icon"  src="@/assets/images/base-images/专业题库.png" alt="">
        <img slot="item-icon-active" src="@/assets/images/base-images/专业题库-选中.png" alt="">
        <div slot="item-text">专业题库</div>
        </TabBarItem>
        <TabBarItem path="/solve/tips" id="center">
        <img slot="item-icon"  src="@/assets/images/base-images/解决方案.png" alt="">
        <img slot="item-icon-active" src="@/assets/images/base-images/解决方案.png" alt="">
        <div slot="item-text">解决方案</div>
        </TabBarItem>
        <TabBarItem path="/action">
        <img slot="item-icon"  src="@/assets/images/base-images/动作库.png" alt="">
        <img slot="item-icon-active" src="@/assets/images/base-images/动作库-选中.png" alt="">
        <div slot="item-text">动作库</div>
        </TabBarItem>
        <TabBarItem path="/mine">
        <img slot="item-icon"  src="@/assets/images/base-images/我的.png" alt="">
        <img slot="item-icon-active" src="@/assets/images/base-images/我的-选中.png" alt="">
        <div slot="item-text">我的</div>
        </TabBarItem>
        
    </TabBar>
    </div>
</template>

<script>
import TabBarItem from './TabBarItem';
import TabBar from './TabBar';
    export default {
    components: {
        TabBar,
        TabBarItem,
        },
    }
</script>

<style  scoped>
    #center img{
    width: 40px;
    height: 40px;
    margin-top: -19px;
    vertical-align: middle;
    margin-bottom: 2px;
}
.main-tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>